<template>
  <div class="column-select">
    <a-select
      v-model="value.value"
      :disabled="disabled"
      size="small"
      :dropdown-match-select-width="false"
      class="select"
      allow-clear
      @change="selectChange"
    >
      <a-select-option
        v-for="(op, j) in options"
        :key="j"
        :value="op.value"
        :disabled="op.disabled"
      >
        <div class="vis-option">
          {{ op.text }}
        </div>
      </a-select-option>
    </a-select>
    <span class="sort-box">
      <a-icon
        class="sort-item"
        :class="{
          active: value && value.sort === 'asc',
          disabled: (value && value.value === '') || disabled,
        }"
        type="caret-up"
        title="升序"
        @click="sortChange('asc', value.value === '' || disabled)"
      />
      <a-icon
        class="sort-item"
        :class="{
          active: value && value.sort === 'desc',
          disabled: (value && value.value === '') || disabled,
        }"
        type="caret-down"
        title="降序"
        @click="sortChange('desc', value.value === '' || disabled)"
      />
    </span>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class ColumnSelect extends Vue {
  @Prop() value!: { value: string; sort: 'asc' | 'desc' | ''; desc: string }
  @Prop() disabled!: boolean
  @Prop() options!: { text: string; value: string; desc?: string }[] // 选项列表

  private selectChange(value: string, option: any) {
    this.$emit('change', {
      ...this.value,
      value: value === undefined ? '' : value,
      desc: option ? this.options[option.data.key].desc : '',
    })
  }

  private sortChange(sortValue: 'asc' | 'desc', disable: boolean) {
    if (disable) {
      return
    }
    if (this.value.value === '') {
      return
    }
    // 重复点击可取消
    this.value.sort = this.value.sort === sortValue ? '' : sortValue
    this.$emit('sortChange', {
      ...this.value,
      sort: sortValue,
    }) // sortChange影响到其他控件 在外部进行处理
  }
}
</script>

<style lang="less" scoped>
.column-select {
  align-items: center;
  display: flex;
  height: 40px;

  .select {
    max-width: 170px;
    width: 100%;
  }

  .sort-box {
    border-color: transparent;
    margin-left: 2px;
    padding: 0;
    width: 16px;

    &:hover {
      border-color: transparent;
      color: #888;
    }
  }

  .sort-item {
    border: 1px solid #eaeaea;
    color: #888;
    display: inline-block;
    float: left;
    font-size: 10px;
    height: 10px;
    line-height: 10px;
    width: 16px;
    width: 100%;

    &.active {
      color: #333;
    }

    &:hover {
      border-color: #5760e6;
      color: #5760e6;
    }

    &.disabled {
      cursor: not-allowed !important;

      &.active {
        color: #888;
      }

      &:hover {
        border: 1px solid #eaeaea;
        color: #888;
      }
    }

    &:first-child {
      margin-bottom: 2px;
    }
  }
}
</style>
